<template>
  <div class="category">
    <div class="left">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
        :title="prod.name"
        v-for="prod in list"
        :key="prod.id"
        @click="rightShow(prod.id)"
        />
      </van-sidebar>
    </div>

    <div class="right">
      <div class="list"
      v-for="rights in right"
      :key="rights.id"
      >
        <van-divider content-position="left">{{rights.name}}</van-divider>
        <van-grid :gutter="10" :column-num="3">
            <van-grid-item
            v-for="ever in rights.childs"
            :key="ever.id"
            :icon="ever.image"
            @click="gotoList(ever.id)"
            >
            <template #text>
              <div class="van-multi-ellipsis--l2">{{ever.name}}</div>
            </template>
            </van-grid-item>
        </van-grid>
      </div>

    </div>

  </div>
</template>

<script>
import { findCategories } from '@/api/category'
export default {
  name: 'Category',
  data () {
    return {
      activeKey: 0,
      list: [],
      right: []
    }
  },
  methods: {
    rightShow (id) {
      console.log('点击了谁' + id)
      const res = this.list.filter(item => item.id === id)
      this.right = res[0].childs
      console.log(this.right)
    },
    gotoList (id) {
      this.$router.push('/list?id=' + id)
      console.log('当前点击id', id)
    }
  },
  created () {
    findCategories()
      .then(data => {
        console.log('分类返回结果', data)
        this.list = data
        this.right = data[0].childs
      })
      .catch(err => {
        console.log('错误', err)
      })
  }
}
</script>

<style lang="scss" scoped>
  .category{
    width: 100%;
    height: 100%;
    display: flex;
    background: #f5f5f5;
    overflow: auto;
    .left{
      overflow: auto;
    }
    .right{
      flex: 1;
      background-color: #f5f5f5;
      height: 100%;
      overflow: auto;
    }
  }
  .van-sidebar-item--select{
    color: #f60;
  }
  .van-divider {
     color: #f60;
  }
  /deep/.van-grid-item__icon {
   font-size: 60px;
  }
  .van-multi-ellipsis--l2{
    font-size: 12px;
  }
</style>
